<template>
  <div class="replyBox" style="padding:0px 20px">
    <better-scroll ref="bs1" @downCb="downCb" @upCb="upCb" :noMore="noMore">
      <template v-slot:content>
        <div class="head">
          <div class="avatarBox">
            <img v-if="commentData.real === '1'" :src="commentData.src || require('src/assets/imgs/use.png')" />
            <img v-else :src="require('src/assets/imgs/use.png')" />
          </div>
          <span class="info">
            <h2 class="clearfix">
              <div class="userName">
                <span v-if="commentData.real === '1'">{{ commentData.nickName }}</span>
                <span v-else>匿名用户</span>
              </div>
            </h2>
            <div class="time clearfix">{{ commentData.createTime }}</div>
          </span>

        </div>
        <div class="main">
          <div class="commentContent" v-html="commentData.detail" >
          </div>
          <div class="replyList" v-if="replyData.length > 0">
            <ul class="box">
              <li v-for="(itemG, i) in replyData" :key="i">
                <div class="reply-top">
                  <div class="avatarBox"> <img v-if="itemG.real === '1'" :src="itemG.src || require('src/assets/imgs/use.png')" />
                    <img v-else :src="require('src/assets/imgs/use.png')" />

                  </div> <span class="userName">
                    <span v-if="itemG.real === '1'">{{ itemG.nickName }}</span>
                    <span v-else>匿名用户</span>
                  </span>
                  <span class="time">
                    {{ itemG.createTime }}
                  </span>
                </div>
                <div style="clear: both; height: 0px; line-height: 0; font-size: 0px;"></div>
                <div class="replyContent" v-html="itemG.detail"></div>
              </li>
            </ul>
          </div>
        </div>
      </template>
    </better-scroll>
  </div>

</template>

<script lang="ts">
import { getReply } from 'src/plugins/http/server/article/index';
import { reactive, ref } from 'vue';
import betterScroll from 'src/components/betterScroll/index.vue';

export default {
    'components': {
        betterScroll
    },
    setup() {
    // betterScroll
        const bs1 = ref();
        const noMore = reactive({
            'status': false,
            'text': '-- 暂无更多数据 --'
        });
        const commentData = JSON.parse(sessionStorage.commentData);
        const pager = reactive({
            'pageNo': 1,
            'pageSize': 10,
            'total': 0
        });
        const replyData = ref([]);
        const getReplyAll = (cb?: () => void) => {
            let params: paramsObj = {
                'pageNo': pager.pageNo,
                'pageSize': pager.pageSize,
                'status':'1',
                'id': commentData.id
            };
            getReply({
                'data': params
            })
                .then((res: any) => {
                    res.data.Datas.forEach((item: replyObj) => {
                        item.createTime = UtilTools.formatDateTime({
                            'date': item.createTime
                        });
                    });
                    pager.total = res.data.total;
                    if (pager.pageNo === 1) {
                        replyData.value = res.data.Datas;
                    } else {
                        replyData.value = replyData.value.concat(res.data.Datas);
                    }
                    if (cb) {
                        cb();
                    }
                })

                .catch(e => {
                    console.log(e);
                });
        };
        getReplyAll();

        return {
            replyData,
            pager,
            commentData,
            bs1,
            noMore,
            getReplyAll,
            downCb() {
                pager.pageNo = 1;
                getReplyAll(() => {
                    noMore.status = false;
                    bs1.value.downRefresh();
                });
            },
            upCb() {
                if (!noMore.status) {
                    if (replyData.value.length >= pager.total) {
                        noMore.status = true;
                    } else {
                        pager.pageNo += 1;
                        getReplyAll(() => {
                            bs1.value.upRefresh();
                        });
                    }
                }
                bs1.value.upRefresh();
            }
        };
    }
};
</script>
<style lang='less' scoped>
@import '~@/views/reply/index.css';
</style>